<<<<<<< HEAD

<template>
	<div class="rank">
		<ul>
			<li v-for='item in rankList' class="rank_item" @click='selectList(item)' >
				<img v-lazy="item.picUrl" width='100' height='100'>
				<div class="list_right">
					<h3 class="rankTitle">{{item.topTitle}}</h3>
					<ul class="song_list">
						<li v-for='(songs,index) in item.songList' class="songs">
							{{index+1}}<span class="songName">{{songs.songname}}</span>- {{songs.singername}}
						</li>
					</ul>
				</div>
			</li>
		</ul>
		<router-view></router-view>	
	</div>
</template> 

<script>
	import { getRank } from 'api/rank'
	import { mapMutations } from 'vuex'
	export default {
		data(){
			return {
				rankList:[]
			}
		},
		created(){
			this._getRank()
		},
		methods:{
			_getRank(){
				getRank().then((res)=>{
					this.rankList = res.data.topList;
					// console.log(res.data.topList)
				})
			},
			selectList(item){
				this.setSongList(item);
				this.$router.push({
					path:'/rank/${item.id}'
				})
				console.log(item)
			},
			...mapMutations({
				'setSongList':'SET_SONGLIST'
			})
		}
	}
</script>

<style scoped lang="less">
	@import '~assets/less/variable';
	.rank{
		margin:10px;
		.rank_item{
			margin-bottom: 10px;
			display: flex;
			align-items:center;
			.list_right{
				display: inline-block;
				vertical-align: top;
				margin:0 10px 0 15px;
				overflow: hidden;
				box-sizing: border-box;
				max-width: 255px;
				.rankTitle{
					margin-bottom: 5px;
					color:@color-text;
				}
				.song_list{
					font-size: @font-size-medium;
					color: @color-text-d;
					.songName{
						color: @color-text-ll;
						margin:0 5px 0 8px;
					}
				}
				.songs{
					line-height: 1.5;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
			}
		}

	}
=======
<template>
  <div class="rank" ref="rank">
    排行页面
  </div>
</template>

<script>

  export default {
   
  }
</script>

<style scoped lang="less">
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
</style>